<template>
	<view>
		<ul>
			<li>
				<view class="left">
					<text class="tit">{{ monitorTypeFormat }}</text>
					<text class="txt">{{ item.monitorName }}</text>
					<text class="txt" v-if="item.monitorTimeType == 0">{{ $t('warn:permanent') }}</text>
					<text class="txt" v-else>
						{{ item.monitorTimeB | formatDate() }}~{{ item.monitorTimeE | formatDate() }}
					</text>
				</view>
				<view class="right">
					<button @click.stop="showDiv('success')"
						:style="{ backgroundColor: getBgColor(item.monitorStatus) }">
						{{ monitorStatusFormat }}
					</button>
				</view>
			</li>
			<view @click.stop="showDiv()" :hidden="userFeedbackHidden" class="popup_content">
				<view class="popup_title">{{ $t('warn:warning') }}</view>
				<view class="popup_txt">{{ content }}</view>
				<view class="popup_textarea_item">
					<button class="popup_button" @click.stop="dialogClose()">{{ $t('warn:cancel') }}</button>
					<button class="popup-warn" @click.stop="dialogConfirm()">{{ $t('warn:ok') }}</button>
				</view>
			</view>
			<view class="popup_overlay" :hidden="userFeedbackHidden" @click.stop="hideDiv()"></view>
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="1000"></uni-popup-message>
			</uni-popup>
		</ul>
	</view>
</template>

<script>
import { vehicleMonitorUpdate } from '@/api/control/index.js'
export default {
	props: {
		item: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			type: 'center',
			content: "",
			msgType: 'success',
			messageText: this.$t('control:messagePrompt'),
			userFeedbackHidden: true,
			feedbackContent: ''
		}
	},
	computed: {
		monitorTypeFormat() {
			const str = this.item.monitorType,
				sexEnum = {
					"7": this.$t('control:vehicleLibrarySurveillance'),
					"17": this.$t('control:singlePlateSurveillance'),
				}
			return sexEnum[str] || '--'
		},
		monitorStatusFormat() {
			const str = this.item.monitorStatus,
				sexEnum = {
					"1": this.$t('control:enable'),
					"2": this.$t('control:disable'),
					"3": this.$t('control:surveillanceExpiry'),
					"4": this.$t('control:deleted')
				}
			return sexEnum[str] || '--'
		}
	},
	methods: {
		showDiv() {
			if (this.item.monitorStatus == 1) {
				this.content = this.$t('control:disableConfirm')
			}
			if (this.item.monitorStatus == 2) {
				this.content = this.$t('control:enableConfirm')
			}
			this.msgType = 'message'
			this.userFeedbackHidden = false;
		},
		hideDiv() {
			this.userFeedbackHidden = true;
		},
		dialogConfirm() {
			// 启用传1  停用传2
			const param = {
				monitorIds: [this.item.monitorId],
				monitorStatus: this.item.monitorStatus == 2 ? 1 : 2
			}
			vehicleMonitorUpdate(param).then(res => {
				if (res.code == "00000000") {
					if (this.item.monitorStatus == 1) {
						this.messageText = this.$t('control:disableSuccess')
					}
					if (this.item.monitorStatus == 2) {
						this.messageText = this.$t('control:enableSuccess')
					}
					this.userFeedbackHidden = true;
					setTimeout(() => {
						this.$emit("changeStatus", 1)
					}, 1000)
				}
			})
		},
		dialogClose() {
			this.userFeedbackHidden = true;
		},
		getBgColor(monitorStatus) {
			switch (monitorStatus) {
				case 1:
					return '#3d5bff'
					break
				case 1:
					return '#afafaf'
					break
				case 1:
					return '#faad14'
					break
				default:
					return '#ff4d4f'
			}
		}
	},
	filters: {
		formatDate: function (num) {
			let date = new Date(num);
			//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			let y = date.getFullYear();
			let MM = date.getMonth() + 1;
			MM = MM < 10 ? ('0' + MM) : MM; //月补0
			let d = date.getDate();
			d = d < 10 ? ('0' + d) : d; //天补0
			let h = date.getHours();
			h = h < 10 ? ('0' + h) : h; //小时补0
			let m = date.getMinutes();
			m = m < 10 ? ('0' + m) : m; //分钟补0
			let s = date.getSeconds();
			s = s < 10 ? ('0' + s) : s; //秒补0
			return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
		},
	}
}
</script>

<style scoped>
ul,
li {
	list-style: none;
}

ul {
	display: flex;
	flex-direction: column;
	padding: 0 30rpx;
}

ul li {
	padding: 30rpx 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #ccc;
}

.left {
	display: flex;
	flex-direction: column;
}

.left .tit {
	font-size: 34rpx;
}

.left .txt {
	padding: 15rpx 0 10rpx;
}

.right button {
	background-color: #919191;
	color: #fff;
	font-size: 28rpx;
	line-height: 60rpx;
	width: 120rpx;
	border-radius: 5rpx;
}

/* 弹窗样式 */
.popup_overlay {
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 1001;
	-moz-opacity: 0.8;
	opacity: .80;
	filter: alpha(opacity=88);
}

.popup_content {
	position: fixed;
	top: 54%;
	left: 48%;
	width: 560rpx;
	height: 272rpx;
	margin-left: -270rpx;
	margin-top: -270rpx;
	padding: 20rpx;
	background-color: white;
	z-index: 1002;
	border-radius: 10px;
	overflow: auto;
}

.popup_title {
	width: 100%;
	text-align: center;
	font-size: 32rpx;
}

.popup_txt {
	text-align: center;
	margin: 50rpx 0;
}

.popup_textarea_item {
	display: flex;
	align-items: center;
	justify-content: space-around;
	border-top: 1px solid #f0f0f0;
}

.popup_button {
	color: #000000;
	width: 50%;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 32rpx;
	background-color: #fff;
}

.popup-warn {
	color: #007aff;
	width: 50%;
	line-height: 70rpx;
	font-size: 32rpx;
	background-color: #fff;
	height: 35px;
	border-left: 1px solid #f0f0f0;
}

uni-button:after {
	border: transparent;
}

.buttons {
	text-align: center;
	font-size: 50rpx;
	background-color: #007AFF;
}
</style>